<template>
  <div class="box">
    <Header>
      <i slot='left'></i>
      门店
    </Header>
    <div class="content">
      <img src="https://img.zhichiwangluo.com/zcimgdir/album/file_5d2842495498c.png" alt="">
    <div class="store-adress">
      <div class="link">
        <ul>
          <li><img src="http://img.zhichiwangluo.com/zcimgdir/thumb/t_15264395715afb9e932aedd.jpg" alt=""></li>
          <li>
            <p>你的专属奶茶店</p>
            <p>深圳市南山区软件基地芒果网大厦</p>
          </li>
          <li><img src="
          http://img.zhichiwangluo.com/zcimgdir/album/file_5afa820166c84.png" alt=""></li>
        </ul>
      </div>
    </div>
    <span class="space"></span>
    <div class="opentime">
      <p class="p1">营业时间</p>
      <p class="p2">周一至周日 09:00-22:00</p>
    </div>
    <span class="space"></span>
    <div class="wifi">
      <p class="p1">WiFi</p>
      <p class="p2">666916</p>
    </div>
    <span class="space"></span>
    <div class="iconfont">
      <p class="pp">门店服务</p>
      <ul>
        <li>
          <span class="iconfont icon-wifi"></span>
          <p>免费WiFi</p>
        </li>
        <li>
          <span class="iconfont icon-shipin"></span>
          <p>视频播放</p>
        </li>
        <li>
          <span class="iconfont icon-tubiaozhizuomoban"></span>
          <p>音乐间</p>
        </li>
        <li>
          <span class="iconfont icon-shu"></span>
          <p>免费图书</p>
        </li>
        <li>
          <span class="iconfont icon-nuanqi"></span>
          <p>冷暖气</p>
        </li>
        <li>
          <span class="iconfont icon-wuzhangaisheshi"></span>
          <p>残障设施</p>
        </li>
        <li>
          <span class="iconfont icon-jiankong"></span>
          <p>安全监控</p>
        </li>
      </ul>
    </div>
    <span class="space"></span>
    <div class="nav">
      <p>店铺导航</p>
      <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573141212493&di=9bcc986a79cb5836c3207a96fe5d8c33&imgtype=jpg&src=http%3A%2F%2Fimg1.imgtn.bdimg.com%2Fit%2Fu%3D3570222036%2C2633247053%26fm%3D214%26gp%3D0.jpg" alt="">
    </div>
    </div>
  </div>
</template>
<style lang="scss">
@import '@/lib/reset.scss';
header {
  @include flexbox();
  @include justify-content(space-between);
}
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.content {
  overflow: hidden;
}
img {
  @include rect(100%,2.5rem);
}
.space {
  @include display(block);
  @include rect(100%,0.02rem);
  @include background-color(rgb(228, 225, 225));
}
.opentime,.wifi {
  @include rect(100%,0.7rem);
  @include color(rgb(119, 117, 117));
  p{
    @include padding(6px 0 6px 20px)
  }
  .p1{
    @include border(0 0 1px 0,rgb(112, 110, 110),solid)
  }
}
.iconfont {
  // @include rect(100%,auto);
  .pp {
    @include padding(6px 0 6px 20px);
    @include color(rgb(119, 117, 117));
  }
  ul {
    li {
      display: inline-block;
      margin:5px 15px 5px 15px;
      font-size: 12px;
      text-align: center;
      @include color(rgb(119, 117, 117));
    }
  }
}
  .link {
    @include rect(100%, 0.7rem);
    // @include margin(0 auto);
    @include flexbox();
    @include align-items();
    ul {
      @include margin(0);
      @include rect(100%, 0.7rem);
      @include margin(0 auto);
      @include flexbox();
      @include align-items();
      @include justify-content(space-around);
      li {
        &:nth-child(1) {
        img{
          @include rect(0.44rem, 0.44rem);
          @include border-radius(50%);
        }
      }
      &:nth-child(2) {
        p{
          &:nth-child(1){
            @include font-size(14px);
            @include color(black);
            @include margin(0 0 0.1rem 0.15rem)
          }
          &:nth-child(2) {
            @include font-size(12px);
            @include color(#ccc);
            @include margin(0 0.15rem 0)
          }
        }
      }
      &:nth-child(3) {
        img {
          @include rect(0.2rem, 0.2rem);
        }
      }
    }
  }
}
.nav {
  p {
    @include padding(6px 0 6px 20px);
    @include color(rgb(119, 117, 117));
  }
  img {
    @include rect(100%,1.8rem);
  }
}
</style>
<script>
import Header from '@/components/header.vue'
export default {
  components: {
    Header
  }
}
</script>
